<style>
</style>
<div  class="layui-card">
    <!---->
    <div class="layui-header notselect">
        <div class="pull-left"><span>订单</span></div>
    </div>
    <div class="layui-card-body">
        <form id="goodApp" autocomplete="off" class="layui-form layui-form-pane form-search" onsubmit="return false;">
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">支付方式</label>
                <div class="layui-input-inline">
                    <select name="payType" lay-search v-modal="payType">
                        <option value="">请选择</option>
                        <option :value="item.key" v-for="item in payTypes">{{item.value}}</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="orderStatus" lay-search v-modal="orderStatus">
                        <option value="">请选择</option>
                        <option :value="item.key" v-for="item in orderStatuses">{{item.value}}</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-inline">
                    <input v-model="nickName"  placeholder="昵称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-inline">
                    <input v-model="phone"  placeholder="手机号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">支付时间</label>
                <div class="layui-input-inline">
                    <input id="payTime" v-model="payTime"  placeholder="支付时间" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <button class="layui-btn layui-btn-primary" @click="doOrderSearch()"><i
                            class="layui-icon">&#xe615;</i>
                    搜 索
                </button>
            </div>
        </form>
        <script type="text/html" id="barTool">
            <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="detail">订单详情</a>
        </script>
        <script type="text/html" id="imageTemplate">
            <img width="40px" height="40px" src="{{ d.thumbnail }}" data-tips-image="{{ d.thumbnail }}"/>
        </script>
        <script type="text/html" id="bcTemplate">
            品牌：{{ d.brandName }}
            <br/>
            分类：{{ d.classifyName }}
            <br/>
        </script>
        <script type="text/html" id="infoTemplate">
            <table class="think-inner-table layui-table">
                <tbody>
                {{# layui.each(d.orderSpecList, function(index, item){ }}
                <tr>
                    <td>
                        <span class="layui-badge layui-bg-gray">{{item.name}}</span>
                    </td>
                    <td class="text-right nowrap">
                        <span class="layui-badge layui-bg-gray">售 {{item.salePrice}} ( 市 {{item.marketPrice}} ) </span>
                        <span class="layui-badge layui-bg-gray">存 {{item.stock}} ( 剩 {{item.surplusNum}}, 售 {{item.saleNum}} ) </span>
                    </td>
                </tr>
                {{# }); }}
                </tbody>
            </table>
        </script>
        <script type="text/html" id="toolbar">
            <div class="layui-btn-container">
            </div>
        </script>
        <script type="text/html" id="orderStatusTemplate">
            {{#  if(d.orderStatus===0){ }}
            <span style="color: red;">已下架</span>
            {{#  } else { }}
            <span style="color: green;">出售中</span>
            {{#  } }}
        </script>
        <table class="layui-hide" id="orderTable" lay-filter="orderTable"></table>
    </div>
</div>
<script>
    require(['jquery', 'ckeditor', 'vue'], function (jquery, ckeditor, Vue) {
        var vue=new Vue({
            el: '#goodApp',
            data: {
                orderStatuses:json.orderStatus,
                payTypes:json.payType,
                payType:"",
                orderStatus:'',
                nickName:'',
                phone:'',
                payTime:''
            },
            created: function () {
            },
            methods:{
                gernerateId: function (name,index){
                    return name+"_" +index
                },
                doOrderSearch:function () {
                    console.info(this.payTime+"========")
                    var startTime=this.payTime.substr(0,10);
                    var endTime=this.payTime.substring(this.payTime.length-10,this.payTime.length);
                    initOrder({nickName:this.nickName,phone:this.phone,orderStatus:this.orderStatus,payType:this.payType,startTime:startTime,endTime:endTime});
                }
            }
        })
        var table;
        layui.use('table', function () {
            table = layui.table;
        });
        laydate.render({
            elem: '#payTime'
            ,range: true,
            done:function (value,date) {
                vue.payTime=value;
            }
        });
        window.form.render();
        window.form.on('select', function(data){
            if(data.elem.name=="payType") {
                vue.payType=data.value;
            }
            if(data.elem.name=="orderStatus") {
                vue.orderStatus=data.value;
            }
        });
        initOrder({});
        function initOrder(data) {
            table.render({
                elem: '#orderTable'
                , url: '/shop/order/ajax_list'
                , title: '用户数据表'
                , totalRow: true
                , page: true
                , id: 'idTest'
                , cols: [[
                      {field: 'orderNo', title: '订单号'}
                    , {field: 'nickName', title: '昵称'}
                    , {field: 'phone', title: '手机号'}
                    , {field: 'orderAmount', title: '订单金额'}
                    , {field: 'orderTime', title: '订单时间'}
                    , {field: 'payTime', title: '支付时间'}
                    , {field: 'payType', title: '支付方式',templet:function (obj) {
                            return getkey("payType",obj.payType);
                        }}
                    , {field: 'orderStatus', title: '状态',templet:function (obj) {
                            return getkey("orderStatus",obj.orderStatus);
                        }}
                    , {fixed: 'right', title: '操作', toolbar: '#barTool'}
                ]]
                , response: {
                    statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
                },
                where: data
                , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                    console.info(res)
                    return {
                        "code": res.errorCode, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.data.totalElements, //解析数据长度
                        "data": res.data.rows //解析数据列表
                    };
                }
            });
            //监听行工具事件
            table.on('tool(orderTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    transData.id = data.id;
                    $.form.modal("/shop/order/detail", {id: data.id}, "订单信息");
                }
            });
        }
    })
</script>